<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>按钮数字加一减一</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
    #addtext {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        color: rgb(0, 0, 0);
        font-family: "宋体";
        resize: none;
        height: 100px;

    }

    .div1 {
        display: flex;
        height: 792px;
        background-color: #111111;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .div2 {
        display: flex;
    }

    #show {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .btn {

        position: relative;
        font-size: 17px;
        text-transform: uppercase;
        text-decoration: none;

        display: inline-block;
        border-radius: 6em;
        transition: all .2s;
        border: none;
        font-family: inherit;
        font-weight: 500;
        color: black;
        background-color: white;
        margin-top: 10px;
        height: 60px;
        width: 60px;

    }

    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        box-shadow: 6px 6px 6px #ffffff,
            -6px -6px 12px #fff;
    }

    .btn:active {
        transform: translateY(-1px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }

    .input {
        border: none;
        border-radius: 15px;
        padding: 15px;
        background-color: #ffffff;
        box-shadow: 6px 6px 12px #ffffff,
            -6px -6px 12px #fff;
        font-size: medium;
        font-weight: bold;
        max-width: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .input:focus {
        outline-color: white;
        place-content: "Enter your message!";
    }
</style>

<body>
    <div align="center" class="div1">
        <div id="show">

        </div>
        <div class="div2">
            <div>
                <input type=" button" class="btn  " name="btn" readonly value="-" onclick="numRed()" />

            </div>
            <div>
                <textarea class="input " id="addtext" readonly>0</textarea>
            </div>
            <div>
                <input type=" button" class="btn  " name="btn" readonly value="+" onclick="numAdd()" />
            </div>
        </div>

    </div>


    </div>
</body>
<script>
    function numAdd() {
        var num = document.getElementById('addtext');
        num.innerHTML++;
        //document.cookie=num.value;
    }
    function numRed() {
        var num = document.getElementById('addtext');
        num.innerHTML--;
        //do
        cument.cookie = num.value;
    }

    window.onload = function () {
        var show = document.getElementById("show");
        setInterval(function () {
            var time = new Date();   // 程序计时的月从0开始取值后+1
            var m = time.getMonth() + 1;
            var t = time.getFullYear() + "-" + m + "-"
                + time.getDate() + " " + time.getHours() + ":"
                + time.getMinutes() + ":" + time.getSeconds();
            show.innerHTML = t;
        }, 1000);
    };

</script>

</html>